<template>
	<div>
		<img alt="Vue logo" src="./assets/logo.png" />
		<!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
		<div>
			<el-button type="primary" @click="to('/')">Home</el-button>
			<el-button type="primary" @click="to('/vuex')">Vuex</el-button>
			<el-button type="primary" @click="to('/axios')">Axios</el-button>
		</div>

		<router-view />
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
	name: 'App',
	components: {},
	methods: {
		to(path: string) {
			this.$router.push(path)
		}
	}
})
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>
